<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <!-- 最外层class命名规则 工程-文件路径-文件名  -->
    <div class="iviewStudy-iviewModal-okCancelBtnExtendDemo">
        <div class="author">
            <div>作者：黄彪</div>
            <div>日期：2017/11/02</div>
        </div>

        <Button @click="showModal" type="primary" style="margin-top: 20px;">显示模态框</Button>

        <Modal
            v-model="modal1"
            title="Common Modal dialog box title"
            :okBtnCloseable = "okBtnCloseable"
            :cancelBtnCloseable = "cancelBtnCloseable"
        >
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>

        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code  class="javascript" v-text="jsCode">
            </code>
        </pre>

        <div class="api">
            <div class="anchor">
                <h2 id="API">属性</h2>
            </div>
            <div class="anchor">
                <h3 id="Select_events"> props</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性名</th>
                    <th>说明</th>
                    <th>类型</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>okBtnCloseable</td>
                    <td>
                        设置改属性为true:点击确定按钮，会消失窗口<br/>
                        设置改属性为false:点击确定按钮，不会消失窗口
                    </td>
                    <td>
                        Boolean,默认值为true
                    </td>
                </tr>
                <tr>
                    <td>cancelBtnCloseable</td>
                    <td>
                        设置改属性为true:点击取消按钮，会消失窗口<br/>
                        设置改属性为false:点击取消按钮，不会消失窗口
                    </td>
                    <td>
                        Boolean,默认值为true
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.iviewStudy-iviewModal-okCancelBtnExtendDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },

    data: function () {
            return {
                modal1:false,
                // 使用默认的确定按钮，如果设置为true表示点击确定按钮会关闭窗口，如果设置为false,表示点击确定按钮不会关闭窗口
                okBtnCloseable:false,
                // 使用默认的取消按钮，如果设置为true表示点击取消按钮会关闭窗口，如果设置为false,表示点击取消按钮不会关闭窗口
                cancelBtnCloseable :false,

                jsCode:'' +
                'data: function () {\n' +
                '\t\treturn {\n' +
                '\t\t\tmodal1:false,\n' +
                '\t\t\t// 使用默认的确定按钮，如果设置为true表示点击确定按钮会关闭窗口，如果设置为false,表示点击确定按钮不会关闭窗口\n' +
                '\t\t\tokBtnCloseable:false,\n' +
                '\t\t\t// 使用默认的取消按钮，如果设置为true表示点击取消按钮会关闭窗口，如果设置为false,表示点击取消按钮不会关闭窗口\n' +
                '\t\t\tcancelBtnCloseable :false,\n' +
                '\t\t}\n' +
                '\t},\n' +
                '\tmethods: {\n' +
                '\t\tshowModal: function(){\n' +
                '\t\t\tthis.modal1 = true;\n' +
                '\t\t},\n' +
                '\t},\n' +
                '}',

                htmlCode:'' +
                '<Modal\n' +
                '\tv-model="modal1"\n' +
                '\ttitle="Common Modal dialog box title"\n' +
                '\t:okBtnCloseable = "okBtnCloseable"\n' +
                '\t:cancelBtnCloseable = "cancelBtnCloseable"\n' +
                '>\n' +
                '\t<p>Content of dialog</p>\n' +
                '\t<p>Content of dialog</p>\n' +
                '\t<p>Content of dialog</p>\n' +
                '</Modal>',
            }
        },
        methods: {
            showModal: function(){
                this.modal1 = true;
            },
        },
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
    .iviewStudy-iviewModal-okCancelBtnExtendDemo{
        table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        table td, table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>

